<template>
  <div class="preview-image">
    <el-dialog title="" :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose" append-to-body
      custom-class="iframe-dialog">
      <div class="content">
        <div class="header-box">
          <div class="label-box">
            <div class="common-title" @click="selTabClick(1)">
              设置标签
            </div>
          </div>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <p class="tips">请参照档案的抓拍人脸图,全景图来设置档案</p>
        <ul>
          <li v-for="(item,index) in esSearchList" :key="index">
            <div>
              <img :src="'/httpImage/'+item.activeObject.targetInfo[0].picSmUrl" alt="">
              <img :src="'/httpImage/'+item.activeObject.picMaxUrl[0]" alt="">
            </div>
            <p>{{item.activeObject.likeDate}}</p>
          </li>
        </ul>
        <div class="dia_bottom">
          <div class="imgs">
            <img :src="'/httpImage/'+esSearchList[0].activeObject.targetInfo[0].picSmUrl" alt="">
          </div>
          <div class="bot_mid">
            <p>档案编号:{{editConfig.infomation.id}}</p>
            <div class="btn_bot">
              <div class="tip_label">
                <el-button>标签</el-button>
                <el-select v-model="tag" placeholder="请选择">
                  <el-option v-for="item in tagList" :key="item.ID" :label="item.name" :value="item.ID">
                  </el-option>
                </el-select>
              </div>
              <div class="tip_btn">
                <el-button @click="setTips">确定</el-button>
                <el-button @click="editConfig.visible=false">取消</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  esSearch,
  getLabelList,
  addConfig,
} from "@/api/residentManage/residentManage"
export default {
  name: "ResidentAnalyseDialog",
  mixins: [],
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: [],
          currentId: "",
        }
      }
    }
  },
  components: {

  },
  computed: {},
  data() {
    return {
      dialogWidth: "39%",
      editConfig: this.editCommonConfig,
      closeUrl: require("@/assets/img/close.png"),
      tag: "",
      esSearchList:[],
      tagList:[]
    }
  },
  created() {
    this.esSearch({ 
      searchTime: [
        "2024-01-27 16:23:12", 
        "2024-02-27 16:23:12"
      ], 
      page: 1, 
      size: 4, 
      sort: "", 
      documentNumbe: this.editConfig.infomation.id, 
    })
    this.getLabelList({
      keyword: "",
      page: 1,
      pageSize: 100
    })
  },
  watch: {

  },
  methods: {
    handleClose() {
      this.pedestalList = []
      this.editConfig.visible = false
    },
    // 人像档案
    esSearch(params) {
      esSearch(params).then((res) => {
        this.esSearchList=res.data.datalist
      })
    },
    getLabelList(params){
      getLabelList(params).then((res)=>{
        console.log(res,"标签")
        this.tagList=res.data.data
      })
    },
    // 
    setTips(){
      if(this.tag==""){
        this.$message.warning("请选择标签")
      }else{
        addConfig({
          personID:this.editConfig.infomation.id,
          labelID:this.tag
        }).then((res) => {
          console.log(res)
          this.$message.success("添加成功")
          this.$emit('refreshData')
          this.editConfig.visible=false
        })
      }
      console.log(this.tag,"看看")
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .iframe-dialog .el-dialog__body {
    // .preview-image {
    // background: #ec6e6e;
    width: 760px;
    height: 734px;

    // position: relative;
    // z-index: 3;
    .dialog-header {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333;
      height: 65px;
      background: #0a1a34;
    }

    .content {
      width: 760px;
      height: 734px;
      background-image: url("/public/panoramicData/pic_alert_bg.png");
      background-position-x: center;
      background-repeat: no-repeat;
      background-size: contain;
      box-sizing: border-box;
      padding: 0 20px;
      position: relative;

      .header-box {
        height: 65px;
        border-bottom: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;

        // padding-top: 30px;
        .label-box {
          display: flex;
          color: #fff;
          font-size: 28px;

          .common-title {
            cursor: pointer;
          }
        }

        .close-box {
          width: 15px;
          height: 22px;
          margin-right: 20px;

          .el-image {
            cursor: pointer;
          }
        }
      }

      .tips {
        font-family: AlibabaPuHuiTi;
        font-size: 20px;
        font-weight: normal;
        line-height: 22px;
        letter-spacing: 0px;
        color: #FFFFFF;
      }

      ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
          width: 45%;
          margin-bottom: 20px;

          img:nth-of-type(1) {
            width: 118px;
            height: 118px;
          }
          img:nth-of-type(2) {
            width: calc(100% - 118px);
            height: 118px;
          }

          p {
            margin: 0;
            height: 29px;
            background: #008000;
            color: #fff;
            text-align: center;
            line-height: 29px;
          }
        }
      }

      .dia_bottom {
        width: 100%;
        height: 130px;
        background: rgba(46, 94, 171, 0.3);
        border: 3px solid rgba(51, 254, 254, 0.3);
        box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
        border-radius: 10px;
        margin-top: 50px;
        display: flex;

        .bot_mid {
          width: 80%;
          padding-left: 20px;

          p {
            font-family: AlibabaPuHuiTi;
            font-size: 18px;
            font-weight: bold;
            line-height: 22px;
            display: flex;
            align-items: flex-end;
            letter-spacing: 0px;
            color: #FFFFFF;
          }

          .el-button {
            width: 81px;
            height: 35px;
            border-radius: 0px;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
            opacity: 1;
            background: #0E9CFF;
            border: none;
            color: #fff;
          }

          .el-select {
            height: 35px;
            border-bottom-right-radius: 6px;
            border-top-right-radius: 6px;
            opacity: 1;
            background: rgba(119, 121, 123, 0.1);

            .el-input__inner {
              height: 35px;
              border-radius: 0px;
              border-bottom-right-radius: 6px;
              border-top-right-radius: 6px;
              opacity: 1;
              background: rgba(119, 121, 123, 0.1);
              border: none;
            }
          }
        }

        img {
          width: 110px;
          height: 110px;
          margin: 10px;
        }

        .btn_bot {
          width: 100%;
          display: flex;
          align-items: center;

          .tip_label {
            width: 50%;
            display: flex;

          }

          .tip_btn {
            width: 100%;
            display: flex;
            justify-content: center;

            .el-button {
              width: 79px;
              height: 35px;
              border-radius: 50px;
              opacity: 1;
              background: rgba(10, 26, 52, 0.6);
              border: 1px solid rgba(89, 175, 249, 0.7049);
              box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
              color: rgba(255, 255, 255, 0.9);
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}

.el-dialog__headerbtn {
  display: none;
}

.el-dialog__body {
  background: #0a1a34;
  width: 760px;
}</style>
